<template>
	<!-- 团队 -->
	<div id="team">
		<header class="mui-bar mui-bar-nav header">
			<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
			<h1 class="mui-title">{{routerTitle}}</h1>
		</header>
		<div class="mui-content">
			<pullRefresh @refresh="toRefresh">
				<div v-if="per>0" class="h-top">
					<p style="font-size:6vw;font-weight: 700;color: #fff;line-height: 1;">团队亏损分红</p>
					<p style="font-size:7vw;font-weight: 700;color: #fff;margin-left: -8px;line-height: 1;">￥{{money}}</p>
					<p style="font-size:4vw;font-weight: 700;color: #fff;line-height: 1;">(比例：千分之{{per*1000}})</p>
					<span @tap="$router.push({path:'/withdraw',query:{businessMoney:true}})" style="text-decoration: underline;margin-top:16px;display: inline-block;">点击提现</span>
				</div>
				<div class="order-list">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">直推人数<span class="mui-badge mui-badge-danger">{{team.directNum}}</span>
						</li>
						<li class="mui-table-view-cell">伞下总人数<span class="mui-badge mui-badge-warning">{{team.allNum}}</span>
						</li>
						<li class="mui-table-view-cell">直推人员：<br><span class="directUser" v-for="item in team.set" @tap="openTeamFH(item.userid)" :style="item.businessPer>0?'background: #ff9934;':''">{{item.username}}</span></li>
					</ul>
				</div>
			</pullRefresh>
		</div>
	</div>
</template>

<script>
	import pullRefresh from "@/components/pullRefresh"
	import {
		team,
		openTeamSend
	} from "@/api/my"
	export default {
		name: "team",
		components: {
			pullRefresh
		},
		data() {
			return {
				team: {
					allNum: 0,
					directNum: 0,
					set: []
				},
			}
		},
		computed:{
			money(){
				return this.$route.query.money
			},
			per(){
				return this.$route.query.per
			}
		},
		mounted() {
			this.getTeam()
		},
		methods: {
			getTeam(callback) {
				mui.showLoading("等待中..", "div");
				team().then(res => {
					this.team = res
					mui.hideLoading()
					callback && callback()
				})
			},
			openTeamFH(userid){
				//开启团队亏损分红
				let _this = this;
				if(this.per>0){
					mui.prompt('','请输入团队亏损分红比例','设置团队亏损分红',['取消','确认'],callback,'div')
					document.querySelector('.mui-popup-input').innerHTML = '千分之<input style="border: 0;border-bottom: 1px solid #000;font-size: 18px;background: transparent;width:50px" min="0" max="99" type="number" autofocus="">'
					
					function callback(e){
						if(e.index==0) return;
						
						mui.showLoading("设置中...", "div");
						var passData = {
							userid,
							businessPer:mui('.mui-popup-input>input')[0].value
						}
						
						//验证
						if(passData.businessPer.trim()=='' || isNaN(parseFloat(passData.businessPer)) || passData.businessPer>99 || passData.businessPer<0){
							mui.hideLoading()
							mui.alert("分红比例为必填项且必须是0-99之间的数字！")
							return;
						}
						
						passData.businessPer = passData.businessPer/1000;
						
						//请求
						openTeamSend(passData).then(res=>{
							mui.hideLoading()
							if(res==200){
								_this.getTeam(()=>{
									mui.toast("设置成功")
								})	//重新拉取
							}else if(res.message){
								mui.toast(res.message)
							}else{
								mui.toast("系统错误")
							}
						})
					}
				}
			},
			toRefresh(callback) {
				//这里进行重新加载数据操作
				this.getTeam(() => {
					callback()
				})
			}
		}
	}
</script>

<style scoped>
	header.mui-bar {
		display: flex;
		justify-content: space-between;
	}

	li.mui-table-view-cell {
		text-align: left;
	}

	.directUser {
		display: inline-block;
		margin: 4vw 3vw 0 0;
		background: #009688;
		padding: 0 2vw;
		line-height: 7vw;
		color: #fff;
		border-radius: 4vw;
	}
	.h-top{width: 100%; background-color: #ff9934;  padding: 5% 0 8% 0;}
</style>
